﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>飞羽体育</title>
    <link rel="stylesheet" href="css/mui.min.css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/mui.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <style>
        *{
            margin: 0;
            border: 0;
            padding: 0;
        }
        body{
            /*font-family: FZLTHJW ;*/
            /*font-family: 微软雅黑;*/
            background: #f8f8f8;
        }
        .vult_01{
            width: 100%;
            text-align: center;
            font-size: 1.9rem;
            border-bottom: 1px solid #d3d3d3;
            background: #ffffff;
            position: fixed;
            z-index: 9999999;
            top: 0;
            left: 0;
            height: 5.5rem;
            line-height: 5.5rem;
        }
        .vult_02{
            width: 100%;
            padding: 2% 2%;
            border-bottom: 1px solid #d3d3d3;
            background: #ffffff;
        }
        .vult2_li1{
            padding-left: 2%;
            font-size: 1.4rem;
            text-align: center;
        }
        .vult2_u1{
            position: absolute;
            width: 20%;
            margin-top: 1%;
            display: none;
            list-style: none;
            background: #fff;
            z-index: 99;
        }
        .vult2_s1{
            font-size: 1.4rem;
            color: #f8a94c;
            display: block;
            float: left;
            width: 65%;
            text-align: center;
        }
        .vult2_i1{
            width: 20%;
            display: block;
            float: left;
            margin-top: 1.5%;
        }
        .vult2_d1{
            overflow: auto;
            width: 90%;
            margin: 0 auto;
            margin-top: 6%;
        }
        .vult2_d3{
            width: 25%;
            float: left;
        }
        .vult2_d4{
            width: 60%;
            float: left;
            height: 3.3rem;
        }
        .vult2_d2{
            overflow: hidden;
        }
        .vult2_it1{
            font-size: 1rem;
            width: 80%;
            background: #f0f0f0;
            height: 1.6rem;
            outline: none;
            padding-left: 10px;
            line-height: 1.6rem;
            margin-top: 1%;
        }
        .vult2_i2{
            width: 10%;
            display: block;
            float: left;
            margin-top: 2%;
        }
        .vult_03{
            background: #f8f8f8;
            width: 100%;
            overflow: hidden;
        }
        .vult3_d1{
            width: 100%;
            padding:4% 3%;
            background: #fff;
            position: relative;
            border-bottom:1px solid #efefef;
            overflow: hidden;
        }
        .vult3_s1{
            display: block;
            font-size: 1.6rem;
            margin-bottom: 3%;
            margin-top: 1%;
        }
        .vult3_s2{
            display: block;
            font-size: 1.4rem;
            color: #8a8a8a;
            margin-bottom: 3%;
        }
        .vult3_s3{
            font-size: 1.5rem;
            color: #f5556f;
            line-height:2rem;
        }
        .vult3_s4{
            font-size: 1.4rem;
            color: #6b708a;
        }
        .vult3_s5{
            font-size: 1.4rem;
            color: #fff;
            background: #f8a94c;
            padding: 0.2% 1%;
            border-radius: 3px;
            margin-right: 1%;
        }
        .vult3_s6{
            color: #6cccff;
            font-size: 1.6rem;
            position: absolute;
            right: 5%;
            top: 40%;
        }
        .vult_04{
            position: fixed;
            width: 100%;
            z-index: 9999999;
            border-top: 1px solid #d3d3d3;
            background: #ffffff;
            bottom: 0;
            height: 6rem;
        }
        .vult4_i1{
            display: block;
            width: 0.1rem;
            float: left;
        }
        .vult4_d1{
            width: 49%;
            float: left;
            margin-right: 1%;
        }
        .vult4_d2{
            width: 49%;
            float: right;
        }
        .vult4_i2{
            width: 14%;
            margin: 0 auto;
            display: block;
            margin-top: 2%;
        }
        .vult4_i3{
            width: 12%;
            margin: 0 auto;
            display: block;
            margin-top: 2%;
        }
        body{
            background: #fafafa
        }
        .other_vlt2_i1{
            transform:rotate(180deg);
        }
        .vult2_d1_other{
            display: block;
        }
        .vult3_i1{
            display: block;
            float: left;
            width: 39%;
            margin-right: 5%;
        }
        .vult4_s1{
            color: #0bc886;
            font-size: 1.6rem;
            display: block;
            text-align: center;
            margin-top: 3%;
        }
    </style>
    <script>
    $(function(){
      $('.vult2_d1').click(function(){
          $('.vult2_i1').toggleClass('other_vlt2_i1');
          $('.vult2_u1').toggleClass('vult2_d1_other');
      });
    })
        window.onload=function () {
            setInterval(function () {
                $(".vult4_i1").css('height',$('.vult4_d1').css('height'));
                $('.vult_02').css('margin-top',$('.vult_01').css('height'));
                $('.vult_03').css('margin-bottom',$('.vult_04').css('height'));
            },16);
        }
    </script>
</head>
<body>
    <div id="vult" v-cloak>
        <div class="vult_01">
            飞羽体育
        </div>
        <div class="vult_02">
            <div class="vult2_d2">
                <div class="vult2_d3" id="vult2_val1">
                    <div class="vult2_d1">
                        <span class="vult2_s1">{{sportName}}</span><img src="images/vult02.png" alt="" class="vult2_i1">
                    </div>
                    <ul class="vult2_u1 am-menu-nav am-avg-sm-3" style="width: 100%;margin-top: 4%;">
                        <li class="am-parent">
                            <ul class="am-menu-sub am-collapse  am-avg-sm-4 " style="list-style: none">
                                <li style="text-align: center;margin-bottom: 2%;width: 25%;float: left" class="vult2_li1" v-for="(sport,index) in sportList" v-on:click="change(index)">
                                    <img style="width: 50%;display: block; margin: 0 auto;margin-bottom: 4%;" v-bind:src="sport.Icon">{{sport.Name}}
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="vult2_d4">
                    <div class="mui-input-row mui-search">
                        <input type="search" style="background: #fafafa;font-size: 1.4rem" v-model="keyword" class="mui-input-clear" placeholder="输入场馆名称">
                    </div>
                </div>
                <button style="float: right; width: 15%;" v-on:click="seach">搜索</button>
            </div>
        </div>
        <div class="vult_03">
            <div class="vult3_d1" v-on:click="VenueInfo(venue.Id)" v-for="venue in venueList">
                <img v-bind:src="venue.faceImg" alt="" class="vult3_i1">
                <span class="vult3_s1">{{venue.Name}}</span>
                <span class="vult3_s2">{{venue.Adress}}</span>
                <span class="vult3_s2">{{venue.Phone}}</span>
                <!--<span  class="vult3_s6">{{venueList.meter}}</span>-->
            </div>
        </div>
        <div class="vult_04">
            <a href="javascript:"><div class="vult4_d1"><img src="images/vult03_other.png" alt="" class="vult4_i2"><span class="vult4_s1">找场地</span></div></a>
            <img src="images/vult05.png" alt="" class="vult4_i1">
            <a href="usercenter.html">
                <div class="vult4_d2">
                    <img src="images/vult04.png" alt="" class="vult4_i3">
                    <span class="vult4_s1" style="color: #7e7e7e;">我的</span>
                </div>
            </a>
        </div>
    </div>
</body>
</html>
<script src="js/zishiying.js"></script>
<script>
    var page = new Vue({
        el: '#vult',
        data: {
            sportList: [],
            sportName: "",
            venueList: [],
            page: 1,
            pagesize: 10,
            sportIndex: 1,
            keyword: ''
        },
        methods: {
            getSportType: function () {
                var that = this;
                $.ajax({
                    type: 'GET',
                    url: window.apiUrl + '/Api/data/getSportType',
                    success: function (data) {
                        console.log(data);
                        if (data.errcode == 0) {
                            that.sportList = data.data.sportList;
                            that.sportList.unshift({ Id: "", Name: "全部", Icon: "images/index-all.png" });
                            that.sportIndex = 0;
                        } else {
                            alert(data.errmsg);
                        }
                    },
                    //error: function () {
                    //    alert("服务器加载异常");
                    //}
                })
            },
            getVenueList: function () {
                var that = this;
                $.ajax({
                    type: 'GET',
                    data: { page: that.page, pagesize: that.pagesize, sportId: that.sportList[that.sportIndex].Id, keyword: that.keyword },
                    url: window.apiUrl + '/Api/Field/VenueList',
                    success: function (data) {
                        if (data.errcode == 0) {
                            that.venueList = data.data.venueList;
                            that.sportName = that.sportList[that.sportIndex].Name;
                        } else {
                            alert(data.errmsg);
                        }
                    },
                    error: function () {
                        alert("服务器加载异常");
                    }
                })
            },
            change: function (index) {
                $('.vult2_i1').toggleClass('other_vlt2_i1');
                $('.vult2_u1').toggleClass('vult2_d1_other');
                this.sportIndex = index;
            },
            seach: function () {
                this.getVen1ueList();
            },
            VenueInfo: function (venueid) {
                location.href = 'venuedetails.html?venueid=' + venueid;
            }
        },
        watch: {
            sportIndex: function () {
                this.getVenueList();
            }
        }
    });
    $(function () {
        page.getSportType();
    })
</script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="/Content/js/wxconfig.js"></script>
<script>
    wx.ready(function () {
        wx.share("飞羽体育", "飞羽体育是一款关于订场app，主要目标人群是运动爱好者。功能包括GPS精准定位附近运动休闲娱乐场馆，为您提供方便、快捷的运动方式及参考，让你感受运动的快乐。", location.href, thisUrl + '/Wap/images/vult17.png');
    })
</script>
